<!DOCTYPE html>
<html>




<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, initial-scale=1" />



<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<link rel="stylesheet" href="/stylesheets/particlesCSS.css">




<script src='/socket.io/socket.io.js'>
</script>



<script>
		
		$(function(){

				$('#login').on('click',function(){
					var name=$('#name').val();
					alert(name);
					if (name!='') {
						emitLogin(name);
					}else{
						alert('请输入昵称');
					};
				});


				$('#send-msg').on('click',function(){
					var msg=$('#msg').val();
					
					chat(msg);
				});

				$('#logout').on('click',function(){
						$('#send-msg').prop('disabled',true);
						$('#name').val('');
						logout();
				});



		});

		var socket=io.connect();
		
				
		socket.emit('login');
		socket.on('login',function(names){


				$('#userList').html('用户列表 ：</br>'+names+'</br>');

		})

		var emitLogin=function(name){
			
			socket.emit('newUserLogin',name);
		}

		var chat=function(msg){
			
			socket.emit('chat',msg);
		};

		var logout=function(){
			
			socket.emit('logout');
		};

		socket.on('newUserLogin',function(name){

			$('#broadcast').append(name+'进入聊天室'+'</br>');
		})


		socket.on('loginConfirmed',function(){
			$('#send-msg').prop('disabled',false);
		})


		socket.on('repeatedName',function(){
			alert('昵称重复，请重新输入');
		});

		socket.on('chat',function(msg){
				$('#broadcast').append(msg+'</br>');javascript:;
        $('#msg').val('');
		});


		socket.on('disconnect',function(name){
			console.log(name+'与服务器断开连接');

			$('#broadcast').append(name+'已断开'+'</br>');
		});


		


</script>
	

</head>
	<body id='particles-js' style="background-color:#000;">
<div style=""></div>
<script src="/javascripts/particles.min.js">

</script>

<script type="text/javascript">
/* ---- particles.js config ---- */

particlesJS('particles-js', {
  "particles": {
    "number": {
      "value": 40,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#FFFFFF"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 2,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 9,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 55,
      "color": "#ffffff",
      "opacity": 1,
      "width": 1
    },
    "move": {
      "enable": true,
      "speed": 3,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "grab"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 120,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 400,
        "size": 40,
        "duration": 2,
        "opacity": 8,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true,

});

</script>



<style type="text/css">

/*canvas{position:absolute;z-index:-1;}*/
canvas{background-image:url(./images/p_02LL.jpg);}



#nav-bar {
    width: 100%;
    background-color: rgba(10,10,10,0.15);
    height: 50px;
    position: absolute;
    top:0px;
}

.nav-head {
    width:100%;
    margin-left: auto;
    margin-right: auto;
    height: 50px;
    
}


</style>

  




    

    <div id='container' class='container' style="position:absolute;top:5%;width:60%;left:20%;height:70%">
      <h1 class='text-center' style="color:#FFF;">聊天室v0.6(Adapted on weChat)</h1>
      <div  >
        <div class='col-sm-4'>
    <input id='name' name='name' placeholder='设置昵称' style="font-size:10pt;width:70%"></br></br>
   <button id='login' class="btn btn-primary" style="font-size:10pt;">进入</button>
    <button id='logout' class="btn btn-danger" style="font-size:10pt;">退出</button>
       
        </div>

    <div id='userList' class='col-sm-4' style="color:#FFF;font-size:15pt;overflow:auto;height:10%">
      
    </div>
         


      </div>
    
    

      <div id='broadcast' style="height:60%;width:100%;overflow:auto;margin-top:30pt;color:#FFF;font-size:20pt">
      </div>


      <div id='send-msg-area' style='height:50pt;border:solid;'>
        <input id='msg',name='msg' class='input' style='height:100%;width:100%;background:transparent;border:0;color:#FFF;font-size:20pt;'/>
        
      </div>
        <button id='send-msg' class='btn-success btn' style='float:right;margin-top:10pt;font-size:20pt;' disabled='true'>发送</button>


</div>


<audio  autoplay="autoplay">
   <source src="./music/Angelika Vee - Tie you Up.mp3" type="audio/mp3" />
Your browser does not support the audio element.
</audio>
	</body>

<script>
    // alert(document.body.clientWidth+"屏幕宽");
    // alert(document.body.clientHeight+"屏幕高");
    var w=window.screen.availWidth;
    var h=window.screen.availHeight;

    $("canvas").css("width",w);
    var h=$("#container").css("height");
   
    $("canvas").css("height",h);
    
</script>

</html>

